#{extends 'template.html'/}
		<link href="@{'/public/stylesheets/estilo.css'}" rel="stylesheet">
 <script src="@{'/public/javascripts/jquery.noty.packaged.min.js'}"></script>
    <!-- Add custom CSS here -->
     <style type="text/css">
	      body {
	        font-family:Arial;
	        font-size:12px;
	      }
	      .example-desc {
	        margin:3px 0;
	        padding:5px;
	      }



	      .split-left {
	        width:450px;
	        float:left;
	      }
	      .split-right {
	        width:400px;
	        float:left;
	        margin-left:10px;
	      }
	      #callback-output {
	        height:250px;
	        overflow:scroll;
	      }
	      textarea#newoptions {
	        width:430px;
	      }
    </style>

	
<body>



	  <!-- CONTAINER -->


	  <div class="container topo">


		  <div class="row primeiraLinha">


			<div class="col-md-4 logo">

				<img src="@{'/public/images/home_logo.png'}" />

			</div>



			<div class="col-md-3 col-md-offset-5 inscrevaSe">
			
			<a href="@{Application.logar()}" class="btn btn-default btnInscrevaSe">Logar</a>


			</div>




			<div class="row">

				<div class="col-md-12 titulosTxt">

				 #{if flash?.success}
					<div class="success"><h2 class="success">${flash.success}</h2></div>
				#{/if}
				<h1 class="homeTitulo">viva experiências locais</h1>
				<h2 class="homeSubTitulo">descubra atividades com pessoas que falam sua língua nativa</h2>

				</div>
				

			</div>


			<div class="row">

				<div class="col-md-12 cidades">


					<ul>

						<li><a href="#">Fortaleza</a></li>
						<li><a href="#">Brasília</a></li>
						<li><a href="#">Madrid</a></li>
						<li><a href="#">Barcelona</a></li>
						<li class="ultima"><a href="#">São Francisco</a></li>


					</ul>


				</div>


			</div>








			<div class="setaBaixo">

				<a href="#about">
					 <img src="@{'/public/images/setaBaixo.png'}" />

				</a>

			</div>



		  </div><! /row primeiraLinha -->



	  </div><!-- FIM CONTAINER -->






	   <!-- DEPOIMENTOS -->
	  <div id="about" class="container depoimentos">

		  <div class="row" style="margin-bottom:45px;">


			  <div class="col-md-12 legendaTxt">


				  <h1 class="tituloContHome">SPEAKRS</h1>
				  <h2 class="subTituloContHome">Conheça mais sobre seu speakr antes de reservar uma experiência,<br> veja quais são seus hobbies, suas atividades e interesses similares.</h2>



			  </div><!-- /col-md-12 -->


		  </div><!-- / row -->

		  <div class="row col-centered">

			  <div class="col-md-4" style="text-align:center; padding-left:25px; padding-right:25px;">


				 <div class="dep">

				  	<img src="@{'/public/images/dep_haight.jpg'}" class="img-circle" />

				  	<p class="depTxt">Engenheiro de som, o brasileiro-americano Paulo Presotto mora em San Francisco há anos e curte compartilhar o seu maior dom – a música</p>

				  	<p class="depNome">-</p>
				  	<p class="depNome"> <b>Paulo Presotto</b>, EUA</p>

				  </div>


			  </div>






			   <div class="col-md-4" style="text-align:center; padding-left:25px; padding-right:25px;">


				 <div class="dep">

				  	<img src="@{'/public/images/dep_alongboard.jpg'}" class="img-circle" />

				  	<p class="depTxt">Publicitária e Design de Moda, nas horas vagas Natália é integrante do grupo Longbrothers onde domina a arte do Longboard em Brasília</p>

				  	<p class="depNome">-</p>
				  	<p class="depNome"> <b>Natália Bezerra</b>, Brasil </p>

				  </div>


			  </div>








			   <div class="col-md-4" style="text-align:center; padding-left:25px; padding-right:25px;">


				 <div class="dep">

				  	<img src="@{'/public/images/dep_asnow.jpg'}" class="img-circle" />

				  	<p class="depTxt">Surfista e Snowboarder, Andrey mora na Califórnia e conhece cada detalhe do Golden State e adora falar sobre os esportes que pratica.</p>

				  	<p class="depNome">-</p>
				  	<p class="depNome"> <b>Andrey Monroe</b>, EUA</p>

				  </div>


			  </div>





		  </div>

	  </div><!-- FIM DEPOIMENTOS -->



	  <!-- PLATAFORMA -->
	  <div class="container plataforma">

		  <div class="row">


			  <div class="col-md-12 legendaTxt">


				  <h1 class="tituloContHomeV">plataforma</h1>
				  <h2 class="subTituloContHomeV">Encontre, reserve, aproveite, compartilhe.</h2>



			  </div><!-- /col-md-12 -->


		  </div><!-- / row -->


		  <div class="row linhaPlataforma">

			   <div class="col-md-3 txtPlataformaEsq">

				   <p>
					   <b>INTERESSES SIMILARES</b><br>

					   Encontre pessoas com interesses similares aos seus: música, esportes radicais, gastronomia etc.
				   </p>


			   </div>



			   <div class="col-md-6 divImgPlataforma">


				   <img class="pImg" src="@{'/public/images/plataforma_img.jpg'}" />

			   </div>



			   <div class="col-md-3 txtPlataformaDir">


				    <p>
					   <b>RESERVE SUA EXPERIÊNCIA</b><br>

					   Gostou de alguma experiência? Preencha os dados necessário para sua reserva e ligaremos você ao seu Speakr.

				   </p>

			   </div>

		  </div><!-- / row -->


	  </div><!-- FIM PLATAFORMA -->




	 <!-- EXPERIENCIAS -->
	  <div class="container experiencias">

		  <div class="row">


			  <div class="col-md-12 legendaTxt">


				  <h1 class="tituloContHome">experiências</h1>
				  <h2 class="subTituloContHome">Encontre uma atividade, você pode selecionar por destino<br>
ou categorias específicas (esportes, gastronomia, fotografia...)</h2>



			  </div><!-- /col-md-12 -->


		  </div><!-- / row -->



		  <div class="row contExperiencias">


			  <div class="col-md-12 noPadding">

			  #{list items:experiencia, as:'exp'}
			  <!-- col-md-4 -->
			  <div class="col-md-4 colExp">


				<div class="thumbnail boxExp">

				      <a href="@{Experiencias.index(exp)}"><img src="${exp?.exp_caminho_ima_home}" /></a>

				      <div class="caption contExp">

				        <h3 class="tiExp"><a href="@{Experiencias.index(exp)}">${exp.exp_titulo}</a></h3>

				        <h4 class="tiAutor">com <a href="@{Experiencias.index(exp)}">${exp.exp_speakr}</a></h4>

				        <p class="txtExp">
					    	${exp.exp_resumo}
				        </p>

				        <div class="linhaCategoria">
							<p class="localExp"><b>${exp.exp_cidade}</b> / ${exp.exp_pais}</p>

							<p class="categoriaExp">${exp.exp_categoria}</p>
				        </div>

				      </div>

				 </div>


			  </div><!-- /col-md-4 -->
			  #{/list}



























			  </div><!-- col-md-12 -->


		  </div><!-- /row -->


		  <div class="row linhaVejaMais">

				<a href="@{Application.maisexperiencias()}" class="btn btn-default btVejaMais">Veja mais experiências</a>

		  </div>


	  </div><!-- FIM EXPERIENCIAS -->










	  	  <!-- INSCREVA-SE -->
	  <div id="inscrever" class="container inscrevase">

		  <div class="row">


			  <div class="col-md-12 legendaTxt">


				  <h1 class="tituloContHomeV">inscreva-se</h1>
				  <h2 class="subTituloContHomeV">

					  Speakrs está atualmente disponível apenas para usuários convidados.<br>
					  A versão final estará disponível em breve.<br><br>

					  Abaixo digite seu e-mail para obter acesso prioritário!<br>
					  <i>(Não se preocupe, só enviaremos coisas importantes)</i>

				  </h2>



			  </div><!-- /col-md-12 -->


		  </div><!-- / row -->


		  <div  class="row linhaForm">

				  <div class="col-md-2"></div>

				  <div class="col-md-8">



					<!-- RESPOSTA DO CADASTRO DE EMAIL -->

						  <p class="respostaInscrevaSe">
						  Email cadastrado com sucesso!<br>
						  Verifique a seu email para confirmar o seu cadastro.
						  </p>

					<!-- RESPOSTA DO CADASTRO DE EMAIL -->



					 	<form id="formpro">
    	<input type="email" placeholder="Digite seu email" class="form-control insInput"  id="ajax" name="pro_titulo"/>

	</form>

<script type="text/javascript">
 
   function generate(texto,layout) {
        var n = noty({
            text        : texto,
            type        : 'alert',
            dismissQueue: true,
            layout      : layout,
            theme       : 'defaultTheme'
        });
        console.log('html: ' + n.options.id);
    }

    
       

  $('#formpro').submit(function() {

  var createAction = #{jsAction @Application.inscreverMail(':pro_titulo') /}

$.post(createAction({pro_titulo: $('#ajax').val()}), function(index, item) {


                    generate('Email cadastrado com sucesso!<br>Verifique a seu email para confirmar a sua inscrição.','center');
       
    

});
$('#ajax').val('');
return false;
 });

 
    


</script>

					


				  </div><!-- / col-md-12 -->

				  <div class="col-md-2"></div>


		  </div><!-- / row -->


	  </div><!-- FIM INSCREVA-SE -->








	   <!-- MENSAGEM -->
	  <div class="container mensagem">

		  <div class="row">


			  <div class="col-md-12 legendaTxt">


				  <h1 class="tituloContHome">entre em contato</h1>
				  <h2 class="subTituloContHome">Solicite uma experiência e tire dúvidas de como funciona a plataforma.</h2>



			  </div><!-- /col-md-12 -->


		  </div><!-- / row -->


		  <div class="row mTop">

			  <div class="col-md-3"></div>

			  <div class="col-md-6">



				     <form class="form-horizontal" role="form" id="formcontato">

						  <div class="form-group">

						    <input name="ema_nome" type="text" class="form-control msgInput" id="exampleInput" placeholder="Seu nome">
						    <input name="ema_email" type="email" class="form-control msgInput" id="exampleInputEmail1" placeholder="Seu email">
						    <textarea name="ema_texto" class="form-control msgInputTA" rows="5" id="contatoTexto" placeholder="Mensagem"></textarea>


						    <button type="submit" class="btn btn-default btnEnviarMsg">Enviar</button>

						  </div>

					  </form>




<script type="text/javascript">
 
   function generate(texto,layout) {
        var n = noty({
            text        : texto,
            type        : 'alert',
            dismissQueue: true,
            layout      : layout,
            theme       : 'defaultTheme'
        });
        console.log('html: ' + n.options.id);
    }

    
       

  $('#formcontato').submit(function() {

  var createAction = #{jsAction @Application.contatoMail(':ema_nome',':ema_email',':ema_texto') /}

$.post(createAction({ema_nome: $('#exampleInput').val(),ema_email: $('#exampleInputEmail1').val(),,ema_texto: $('#contatoTexto').val()}), function(index, item) {
$.get("projetos.json", function(index, item) {

                    generate('Seu email foi enviado','center');
       
        });

});
$('#exampleInput').val('');
$('#exampleInputEmail1').val('');
$('#contatoTexto').val('');
return false;
 });

 
    


</script>





			  </div>

			  <div class="col-md-3"></div>


		  </div>

	  </div><!-- FIM MENSAGEM -->



	


	   <div class="container rodape">

		<div class="row col-centered">

			<div class="col-md-4">

				<p class="copy">Copyright © Speakrs 2014</p>


			</div>

			<div class="col-md-3 col-md-offset-5 icoRedes">

				<a href="https://www.facebook.com/speakrs.me?fref=ts" target="_blank">
					<img src="@{'/public/images/ico_facebook.jpg'}" />
				</a>

				<a href="#" target="_blank">
					<img src="@{'/public/images/ico_twitter.jpg'}" />
				</a>


			</div>

		</div>

	  </div><!-- /container -->































<script src="@{'/public/javascripts/bootstrap.js'}"></script>
 <script>
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    </script>
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    </script>
 <script>
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>


</body>
